<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户资料</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <style>
        .layui-upload-drag {
            position: relative;
            display: inline-block;
            padding: 10px 10px 28px 10px;
            border: 1px dashed #e2e2e2;
            background-color: #fff;
            text-align: center;
            cursor: pointer;
            color: #999;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="" lay-filter="frmMain">
    <input type="hidden" name="id">
    <input type="hidden" name="headimg">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-row">
                <div class="layui-col-xs10 layui-col-md10 layui-col-md10 layui-col-lg10 layui-col-xl10">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" placeholder="姓名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" name="email" placeholder="邮箱" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-block">
                                    <input type="text" name="telephone" placeholder="电话" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">生日</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="birthday" readonly placeholder="生日" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-xs4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">入职日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="entry_date" readonly placeholder="入职日期" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <select name="sex" lay-verify="">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12" style="text-align: center">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                                        lay-filter="save">
                                    <i class="layui-icon layui-icon-ok"></i>
                                    保存个人资料
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs2 layui-col-md2 layui-col-md2 layui-col-lg2 layui-col-xl2"
                     style="text-align: center">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">头像</label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" style="display: block;" id="updateFile">
                                <img id="header_img" alt="请上传头像" style="width: 51px;height: 51px"
                                     src="">

                                <!--<i class="layui-icon layui-icon-upload"></i>-->
                                <div>点击上传，或将文件拖拽到此处</div>
                                <div class="layui-hide" id="ID-upload-demo-preview">
                                    <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</form>

<script src="../../../config/apiUrl.js"></script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['http','form', 'jquery', 'http', 'popup', 'common', 'toast', 'laydate','upload'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let toast = layui.toast;
        let laydate = layui.laydate;
        let upload = layui.upload;
        let http = layui.http;
        laydate.render({
            elem: '[name="birthday"]',
            format: 'yyyy-MM-dd',
            theme: '#36b368'
        });
        laydate.render({
            elem: '[name="entry_date"]',
            format: 'yyyy-MM-dd',
            theme: '#36b368'
        });

        function closeWin() {
            let layer_index = parent.layer.getFrameIndex(window.name);
            if (layer_index > 0) {
                parent.layer.close(layer_index); //关闭当前页
            }
        }

        $(document).keyup(function (event) {
            if (event.keyCode == 27) {
                closeWin();
            }
        });

        async function getUserInfo() {
            var data = await common.ajax({
                url: apiUrlConfig.user.getUserByUserId,
                type:"get"
            });
            $("#header_img").attr("src",apiUrlConfig.file.getFile+"?token="+encodeURIComponent(http.ajax.getToken())+"&isOnLine=true&fileId="+data.data.headimg);
            form.val("frmMain", data.data);
        }

        getUserInfo();

        async function updateUser(data) {
            try {
                let return_data = await common.ajax({
                    url: apiUrlConfig.user.update,
                    data: JSON.stringify([data])
                })
                toast.success({title: false, message: "修改成功"})
            }catch (e){
                let error_msg = JSON.parse(e.msg);
                for (key in error_msg){
                    let field_name = key.replace("list[0].","");
                    let error_text = error_msg[key];
                    layer.tips(error_text, $("[name='"+field_name+"']"), {
                        time: 3000,
                        tips: [2, "#FF5722"],
                        tipsMore: true
                    });
                }
            }
        }

        form.on('submit(save)', function (data) {
            layer.confirm('确定修改么', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                updateUser(data.field);
            });
            return false;
        });

        upload.render({
            elem: '#updateFile',
            url: apiUrlConfig.file.uploadFile, // 实际使用时改成您自己的上传接口即可。
            done: function(res){
                //上传完毕回调
                if(res.status == 200){
                    $("[name='headimg']").val(res.data.id);
                    toast.success({title: false, message: "上传成功"})
                    $("[lay-filter='save']").click();
                    $("#header_img").attr("src",apiUrlConfig.file.getFile+"?token="+encodeURIComponent(http.ajax.getToken())+"&isOnLine=true&fileId="+res.data.id);
                }else{
                    toast.error({title: false, message: res.msg})
                }
            },
            headers:{
                "authorization": http.ajax.getToken()
            }
        });
    })
</script>
<script>
</script>
</body>
</html>
